<template>
  <div class="flight-state">
    <el-header>
      <!-- Logo and Navigation -->
      <el-rate v-model="value" clearable />
    </el-header>
    <el-main class="content">

      <el-form @submit.native.prevent="submitquery" label-width="120px">
        <el-form-item label="请输入航班状态">
          <el-input v-model="form.flightState"></el-input>
        </el-form-item>
        <el-form-item label="请选择日期时间">
          <el-container >
            <el-aside width="225px">
              <el-date-picker
                  v-model="form.originalDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-aside>
              <el-time-picker
                  v-model="value"
                  is-range
                  range-separator="To"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
              />
          </el-container>
        </el-form-item>

      </el-form>


    </el-main>
    <el-footer>
      <!-- 数据表格的工具栏 -->
      <div style="text-align: left">
        <el-button-group>
            <el-button type="primary" @click="submitquery">查询</el-button>
        </el-button-group>
      </div>
      <!-- 数据表格 -->
      <div class="lg">
      <el-table :data="tableFlight" stripe border style="width: 100%">
        <el-table-column prop="FLID" label="航班号" width="140" />
        <el-table-column prop="FRTT" label="始发时间" width="150" />
        <el-table-column prop="FRLT" label="抵达时间" width="150"/>
        <el-table-column prop="FFID" label="航班标识日期" width="150"/>
        <el-table-column prop="FIDE" label="航班标识时间" width="150"/>
        <el-table-column prop="startaddress" label="始发地" width="100" />
        <el-table-column prop="CNNM" label="目的地" width="100" />
        <el-table-column prop="CODE " label="值机柜台编号" width="150" />
        <el-table-column prop="ISTA" label="航班状态" width="100" />
      </el-table>
  </div>
  <div class="pagination">
    <button @click="previousPage">上一页</button>
    <span v-for="page in totalPages" :key="page" @click="goToPage(page)">
        <button :class="{ active: page === currentPage }">{{ page }}</button>
      </span>
    <button @click="nextPage">下一页</button>
  </div>
      <div class="fd">
        <img src="../../assets/imgs/state.png" height="550" width="100%"/><br/>
      </div>
    </el-footer>
  </div>
</template>

<script>





export default {
  data() {
    return {
      form: {
        flightState: '',
        originalDate: ''
      },
      currentPage: 1,
      pageSize: 10,
      totalPages: 1,
      showModal: false,
      currentFlight: null, // 当前选中的航班
      textarea: ''
    };
  },
  methods: {
    submitquery() {
      // Submit the application form
    },
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    goToPage(page) {
      this.currentPage = page;
    },
    calculateTotalPages() {
      this.totalPages = Math.ceil(this.flights.length / this.pageSize);
    }
  }
};

import { ref } from 'vue'

const value1 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
const value2 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])

</script>


<style scoped>
.flight-state{
  height: 1300px;
}
.content {
  max-width: 1000px;


}
.content h3 {
  color: #337ab7; /* 蓝色标题 */
  border-bottom: 2px solid #337ab7; /* 标题下划线 */
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.demo-range .el-date-editor {
  margin: 6px;
}

.demo-range .el-range-separator {
  box-sizing: content-box;
}
.lg{
  padding: 2px 2px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
}
.pagination button {
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  cursor: pointer;
}
.pagination button.active {
  background-color: #4680b2;
  color: white;
  border-color: #3685c7;
}
/* 更多样式... */
</style>